<template>
  <div>
    <Tabs v-model="currentTab" type="card" :animated="false" @on-tab-remove="removeTab" @on-click="toStaffVist">

      <TabPane label="员工管理" name="/">
          <people v-if="currentTab == '/'"></people>
      </TabPane>

      <TabPane label="角色管理" name="/role_managent">
          <role @updateName="updateName"></role>
      </TabPane>

      <!-- 授权记录 -->
      <TabPane 
      v-for="(tab,index) in opendStaffTabs" 
      :name="'/'+ tab.id" 
      :key="tab.id + index" 
      :label="tab.name" closable>
            <keep-alive>
                <router-view :staff-info="tab"></router-view>
            </keep-alive>
      </TabPane>

    </Tabs>
  </div>
</template>

<script>
import people from './people/people.vue'
import { mapGetters } from 'vuex'
import role from './role/role.vue'
import accessControll from './access-controll.vue'

export default {
  data () {
    return {
    }
  },
  methods: {
    updateName (val) {
      this.name = val
    },

    removeTab (id) {
      this.$store.dispatch('removeStaffTab', id).then(path => {
        this.$router.push('/staff' + path)
      })
    },
    toStaffVist (tabsName) {
      this.$router.push(`/staff${tabsName}`)
    }
  },
  components: {
    people,
    role,
    accessControll
  },
  computed: {
    ...mapGetters(['opendStaffTabs']),
    currentTab: {
      get () {
        return this.$store.state.staff.currentStaffTab
      },
      set (val) {
        this.$store.dispatch('setStaffCurrentTab', val)
      }
    }
  },
  watch: {
    $route (n) {
      if (n) {
        this.$store.dispatch('setStaffCurrentTab', '/' + (this.$route.params.staffId || ''))
      }
    }
  },
  beforeRouteLeave (to, from, next) {
    this.$store.dispatch('cleanStaffStateCache').then(() => {
      next()
    })
  }
}
</script>

<style lang="less">
.ivu-card-head p {
    height: auto;
}

.ivu-card-head {
    padding-top: 8px;
    padding-bottom: 6px;
}
</style>
